<template>
    <div class="wrap">
        <div class="page-head">
            <a-breadcrumb>
                <a-breadcrumb-item>{{ $t('device.device.60zedd3ezeo3') }}</a-breadcrumb-item>
                <a-breadcrumb-item>{{ $t('device.device.60zedd3f05s0') }}</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
            <template v-slot:refresh>
                <a-button type="outline" @click="refresh">
                    <template #icon>
                        <icon-loop />
                    </template>
                </a-button>
            </template>
            <template v-slot:addEquipmentGroup>
                <a-button type="primary" v-permission="['deviceGroup:add']" @click="form.groupCreate.show = true">
                    <template #icon>
                        <icon-plus />
                    </template>
                    {{ $t('components.group.6282niyqd0c0') }}
                </a-button>
            </template>
        </c-table-search>
        <div class="table-scroll">
            <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
                @refresh="getData">
                <a-table-column :title="$t('device.device.60zedd3ezeo0')" ellipsis tooltip :width="800">
                    <template #cell="{ record }">
                        {{ record.name ? record.name : '-' }}
                    </template>
                </a-table-column>
                <a-table-column :title="$t('device.device.60zedd3f14c0')" fixed='right' :width="260">
                    <template #cell="{ record }">
                        <a-space>
                            <a-button type="text" v-permission="['deviceGroup:edit']"
                                @click="handleUpdata(record)">{{ $t('components.group.6282niyqdf40') }}</a-button>
                            <a-button type="text" v-permission="['deviceGroup:del']" status="danger"
                                @click="handleDelete(record)">{{ $t('components.group.6282niyqdow0') }}</a-button>
                        </a-space>
                    </template>
                </a-table-column>
            </c-table>
            <CGroupUpdata @refresh="getData" v-model:show="form.groupUpdate.show" v-model:data="form.groupUpdate.data"></CGroupUpdata>
            <CGroupCreate @refresh="getData" v-model:show="form.groupCreate.show"></CGroupCreate>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { apiDeviceGroupList, apiDeviceGroupDelete } from '@/api/device'
const CGroupUpdata = defineAsyncComponent(() => import('./components/groupUpdata.vue'))
const CGroupCreate = defineAsyncComponent(() => import('./components/groupCreate.vue'))
const temp = useTemp()
const local = useLocal()
const emit = defineEmits(['refresh'])
const refresh = () => {
    emit('refresh')
}
const form = reactive({
    groupCreate: {
        show: false
    },
    groupUpdate: {
        loading: false,
        show: false,
        data: {},
    },
    delete: {
        show: false
    },
    data: {
        name: '',
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [],
    count: 0
})
// 设备列表
const getData = async () => {
    form.loading = true
    const { code, data } = await apiDeviceGroupList({
        ...form.data
    })
    form.loading = false
    if (code != 200) return;
    form.list = data.list
    form.count = data.total

}
// 编辑
const handleUpdata = (record: any) => {
    form.groupUpdate.data = cloneDeep(record)
    form.groupUpdate.show = true
}
// 删除
const handleDelete = async (record: any) => {
    useModal.warning({
        content: t('components.group.6282niyqdtc0'),
        onBeforeOk: async () => {
            const { code } = await apiDeviceGroupDelete({
                id: record.id
            })
            if (code != 200) return false;
            useMessage.success()
            getData()
            return true
        }
    })
}
onBeforeMount(() => {
    getData()
    temp.getDeviceGroupList()
})
</script>

<style scoped lang="less">
.show {
    display: none
}

.color {
    width: 30px;
    height: 30px;
    border-radius: 2px;
}
</style>
